<!--
 * @Author: 卢金辉 3400170271@qq.com
 * @Date: 2025-09-11 08:46:32
 * @LastEditors: 肖世渊 xiao2655308229@163.com
 * @LastEditTime: 2025-09-17 17:53:33
 * @FilePath: \23级信算卢金辉\city\src\pages\components\Bottom1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom1" style="height: 150px; margin-top: 20px;"></div>
    </div>
</template>
<script>
import { Liquid } from '@antv/g2plot';
import { get } from '@/utils/request';
import { mapState } from 'vuex';

export default {
    data() {
        return {
            title: '实时湿度占比',
            params: {
                page: 1,
                pageSize: 10,
            },
            shiduData: [],
            plot: null,
        }
    },
    computed: {
        ...mapState(['ed']),
    },
    // 侦听器
    watch: {
        ed: {
            handler(n, o) {
                // 根据设备信息重新查询数据 渲染图表
                this.params.engineer_id = n.engineer_id;
                this.params.device_id = n.device_id;
                this.getShiduData().then(() => {
                    // 数据获取后，重新渲染图表
                    if (this.plot) {
                        this.plot.destroy(); // 先销毁旧图表
                        this.loadShidu(); // 重新创建图表
                    }
                });
            },
            // 深度侦听
            deep: true,
        },
    },

    methods: {
        loadShidu() {
            this.plot = new Liquid(this.$refs.bottom1, {
                percent: this.shiduData,
                shape: 'diamond',
                outline: {
                    border: 4,
                    distance: 8,
                },
                wave: {
                    length: 128,
                },
                pattern: { type: 'line' },
            });
            this.plot.render();
        },
        async getShiduData() {
            let res = await get('/dashboard/pageQueryTodayData', this.params);
            console.log(res, "获取响应");
            if (res.data && res.data.list && res.data.list.length > 0) {
                // 把humidity从字符串转为数字，再除以100得到百分比值（比如43转为0.43）
                this.shiduData = Number(res.data.list[0].humidity) / 100;
            } else {
                this.shiduData = 0; // 没有数据时设为0
            }
            return Promise.resolve();
        }
    },
    async mounted() {
        await this.getShiduData(),
            this.$nextTick(() => {
                this.loadShidu();
            });
    },
}
</script>
<style lang="less" scoped></style>